<template>
	<view>
		<u-navbar :border-bottom="false" title="提交客户" back-icon-color="#ffffff" :background="{background:'#2149c3'}" title-color="#ffffff"></u-navbar>
		<view>
			<view class="top_steps">
				<u-steps :list="numList" :current="0" un-active-color="#636d8b"></u-steps>
			</view>
			<view class="top_steps_jbxx">
				请填写基本信息
			</view>
			<view class="steps_form_user">
				<view class="steps_row">
					<view class="icon"><image src="../../static/icon/form_icon01.png"></image></view><view style="color: red;">*</view>
					<u-input placeholder="客户姓名" v-model="name" placeholder-style="#b7b7b7" maxlength="10"/>
				</view>
				<view class="steps_row">
					<view class="icon"><image src="../../static/icon/form_icon02.png"></image></view><view style="color: red;">*</view>
					<u-input placeholder="客户手机号(支持多个以英文分号;分隔)" maxlength="150" v-model="telephone" placeholder-style="#b7b7b7"/>
				</view>
				<view class="steps_row">
					<view class="icon"><image src="../../static/icon/form_icon01.png"></image></view><view style="color: red;">*</view>
					<u-input placeholder="公司名称" maxlength="11" v-model="company" placeholder-style="#b7b7b7"/>
				</view>
				<view class="steps_row">
					<view class="icon"><image src="../../static/icon/form_icon03.png"></image></view>
					<u-input placeholder="面积 (平米)" maxlength="20" v-model="area" placeholder-style="#b7b7b7"/>
				</view>
				<view class="steps_row mini_steps">
					<view class="input_picker">
						<view class="icon"><image src="../../static/icon/form_icon04.png"></image></view><view style="color: red;">*</view>
						<u-input placeholder="装修类型" placeholder-style="#b7b7b7" v-model="picker_name" :disabled="true"/>
						<u-picker v-model="isshow" mode="selector" :default-selector="[0]" :range="picker" @confirm="PickerChange" range-key="cateName">
						</u-picker>
					</view>
					<view class="picker_btn" @click="pickerIsshow()">
						<view>选择</view>
						<u-icon name="arrow-right" color="#636e8b" size="28"></u-icon>
					</view>
				</view>
				<view class="steps_row">
					<view class="icon"><image src="../../static/icon/form_icon05.png"></image></view>
					<u-input placeholder="请填写详细地址（省市区）" placeholder-style="#b7b7b7" maxlength="100" v-model="address"/>
				</view>
				<view class="steps_row steps_textarea">
					<view class="icon"><image src="../../static/icon/form_icon06.png" mode="widthFix"></image></view>
					<u-input type="textarea" placeholder="请填写补充情况" placeholder-style="#b7b7b7" maxlength="100" v-model="remark"/>
				</view>
			</view>
		</view>
		<!-- <form> -->
			<!-- <view class="cu-form-group margin-top">
				<view class="title">客户姓名<text class="required">*</text></view>
				<input maxlength="10" v-model="name" placeholder="请填写客户姓名" name="input"></input>
			</view> -->
			<!-- <view class="cu-form-group">
				<view class="title">手机号码<text class="required">*</text></view>
				<input type="number" maxlength="11" v-model="telephone" placeholder="请填写手机号码" name="input"></input>
				<view class="cu-capsule radius">
					<view class='cu-tag bg-blue '>
						+86
					</view>
					<view class="cu-tag line-blue">
						中国大陆
					</view>
				</view>
			</view> -->
			<!-- <view class="cu-form-group">
				<view class="title">面积</view>
				<input  placeholder="请填写面积" name="input"></input>
			</view> -->
			<!-- <view class="cu-form-group">
				<view class="title">装修类型<text class="required">*</text></view>
				<picker @change="PickerChange" :value="index" :range="picker">
					<view class="picker">
						{{index>-1?picker[index]:'选择'}}
					</view>
				</picker>
			</view> -->
			<!-- <view class="cu-form-group">
				<view class="title">详细地址</view>
				<textarea maxlength="100" v-model="address" placeholder="请填写详细地址(省市区)"></textarea>
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">补充情况</view>
				<textarea maxlength="100" v-model="remark" placeholder="请填写补充情况"></textarea>
			</view> -->
			<view class="padding flex flex-direction">
				<button class="cu-btn bg-blue margin-tb-sm lg" @click="submitCustomer()">提交</button>
			</view>
		<!-- </form>		 -->
	</view>
</template>

<script>
	var _self;
	import {
		mapState,
		mapMutations
	} from 'vuex';	
	export default {
			computed: {
				...mapState(['userInfo', 'hasLogin', 'loginProvider', 'openid'])
			},
			data() {
				return {
					index: -1,
					picker: [
						{
							cateName:'毛坯'
						},
						{
							cateName:'遗留装修'
						}
					],
					picker_name:'',
					name: '',
					telephone: '',
					company: '',
					area: '',
					address: '',
					remark: '',
					numList: [{
						name: '填写资料'
					}, {
						name: '　'
					}, {
						name: '提交资料'
					}],
					isshow:false
				};
			},
			onLoad(){
				_self = this;
			},
			methods: {
				...mapMutations(['login', 'logout', 'setOpenid', 'setProvider']),
				PickerChange(e) {
					this.index = e[0];
					this.picker_name = this.picker[e[0]].cateName;
				},
				submitCustomer : function(){
					if(this.name.length<1){
						uni.showToast({ title: "客户姓名不能为空", icon: "none" });
						return;
					}
					if(this.telephone.length<1){
						uni.showToast({ title: "手机号不能为空", icon: "none" });
						return;
					}
					if(this.company.length<1){
						uni.showToast({ title: "公司名称不能为空", icon: "none" });
						return;
					}
					var reg = /^1[0-9]{10,10}$/;
					var telephones = this.telephone.split(";");
					for(var t in telephones){
						console.log(telephones[t]);
						if (!reg.test(telephones[t])) {
							uni.showToast({ title: "手机号格式不正确", icon: "none" });
							return;
						}
					}
					
					if(this.index==-1){
						uni.showToast({ title: "装修类型不能为空", icon: "none" });
						return;
					}
					uni.showLoading({});
				    uni.request({
				    	url: this.serverUrl + 'app/addCustomer',
				    	header: {
				    		"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
				    	},
				    	method: 'POST',
				    	data: {
				    		name: this.name,
							telephone: this.telephone,
							company: this.company,
							area: this.area,
							address: this.address,
							remark: this.remark,
							type: this.index,
							memberId: this.userInfo.id,
				    	},
				    	success: (r) => {
							// console.log(r);
				    		if (r.data.code==1) {
								uni.showToast({
									title: '提交成功',
									icon: 'none'
								})
								setTimeout(function() {
									uni.navigateBack({
										delta:1,
									})
								}, 200)
							}else{
								uni.showModal({
									content:r.data.msg
								})
							}
						},complete(r) {
							uni.hideLoading();
						}
					})
				},
				pickerIsshow:function(){
					this.isshow = true;
				}
			}
		}
</script>

<style lang="less">
	.required{
		color: red;
	}
	.padding{
		text-align: center;
	}
	.cu-form-group .title{
		width: 170rpx;
	}
	.top_steps{
		padding-top: 30rpx;
	}
	.top_steps .u-line {
		border-bottom-style: dashed !important;
	}
	.top_steps_jbxx{
		font-size: 32rpx;
		line-height: 81rpx;
		color: #636d8b;
		border-bottom: 30rpx solid #f9f9f9;
		padding-left: 70rpx;
		padding-top: 10rpx;
	}
	.steps_form_user{
		padding: 20rpx 40rpx;
	}
	.steps_row{
		// height: 75rpx;
		background-color: #f7f7f7;
		border-radius: 35rpx;
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
		justify-content: left;
		padding: 5rpx 28rpx;
		.icon{
			width: 42rpx;
			height: 45rpx;
			margin-right: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				max-height: 100%;
				width: 42rpx;
				height: 45rpx;
			}
		}
		u-input{
			flex: 1;
		}
	}
	.steps_row:last-child{
		margin-bottom: 0rpx;
	}
	.steps_textarea textarea{
		padding-top: 30rpx !important;
	}
	.mini_steps {
		display: flex;
		background-color: transparent;
		padding: 0px;
		justify-content: space-between;
	}
	.input_picker {
		flex: 1;
		display: flex;
		align-items: center;
		background-color: #f7f7f7;
		padding: 5rpx 28rpx;
		border-radius: 35rpx;
		margin-right: 50rpx;
	}
	.picker_btn{
		width: 120rpx;
		font-size: 28rpx;
		color: #636e8b;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
</style>
